<template>
  <div
    class="system-button w-330px h-127px relative cursor-pointer box-border"
    :class="[type ? `system-button-${type}` : '', !hasSystems ? 'disabled' : '']"
    @click="handleChange"
  >
    <template v-if="type == 'left'">
      <img
        class="system-button-bg w-full block absolute top-0 left-50% translate-x--50% duration-300"
        src="@/assets/imgs/home/btn-left.png"
        alt=""
        srcset=""
      />
      <img
        class="system-button-bg active w-full block absolute top-0 left-50% translate-x--50% duration-300"
        src="@/assets/imgs/home/btn-left-active.png"
        alt=""
        srcset=""
      />
    </template>
    <template v-if="type == 'right'">
      <img
        class="system-button-bg w-full block absolute top-0 left-50% translate-x--50% duration-300"
        src="@/assets/imgs/home/btn-right.png"
        alt=""
        srcset=""
      />
      <img
        class="system-button-bg active w-full block absolute top-0 left-50% translate-x--50% duration-300"
        src="@/assets/imgs/home/btn-right-active.png"
        alt=""
        srcset=""
      />
    </template>
    <div
      class="system-button-content box-border flex items-center absolute left-0 top-0 w-full h-77px"
    >
      <img
        v-if="item.type == 'DataManagement'"
        class="system-button-content-icon"
        src="@/assets/imgs/home/btn-icon-data-management.png"
        alt=""
        srcset=""
      />
      <img
        v-if="item.type == 'DataAcquisition'"
        class="system-button-content-icon"
        src="@/assets/imgs/home/btn-icon-data-acquisition.png"
        alt=""
        srcset=""
      />
      <img
        v-if="item.type == 'DynamicMonitoring'"
        class="system-button-content-icon"
        src="@/assets/imgs/home/btn-icon-dynamic-monitoring.png"
        alt=""
        srcset=""
      />

      <img
        v-if="item.type == 'ComparativeAnalysis'"
        class="system-button-content-icon"
        src="@/assets/imgs/home/btn-icon-comparative-analysis.png"
        alt=""
        srcset=""
      />
      <img
        v-if="item.type == 'UrbanInsight'"
        class="system-button-content-icon"
        src="@/assets/imgs/home/btn-icon-urban-insight.png"
        alt=""
        srcset=""
      />
      <img
        v-if="item.type == 'BusinessVisualization'"
        class="system-button-content-icon"
        src="@/assets/imgs/home/btn-icon-business-visualization.png"
        alt=""
        srcset=""
      />
      <img
        v-if="item.type == 'PresentationAnalysis'"
        class="system-button-content-icon"
        src="@/assets/imgs/home/btn-icon-business-visualization.png"
        alt=""
        srcset=""
      />
      <div
        class="system-button-content-text italic font-size-28px font-500 text-left color-#fff leading-none tracking-4.2px"
      >
        {{ item.title }}</div
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, computed } from 'vue'
import { usePermissionStore } from '@/store/modules/permission'

interface Props {
  type?: string
  item: {
    title: string
    type: string
    disabled: boolean
    target: string
  }
}

const { type, item } = withDefaults(defineProps<Props>(), {
  type: () => 'left'
})

const permissionStore = usePermissionStore()
const hasSystems = computed(() => {
  return permissionStore.getRawMenuTypes?.indexOf(item.type) != -1
})

const emit = defineEmits(['click'])

const handleChange = () => {
  emit('click', item.type)
}
</script>

<style lang="less" scoped>
.system-button {
  &.disabled {
    pointer-events: none;
    filter: brightness(0.5);
  }

  &-bg {
    &.active {
      width: 549px;
      opacity: 0;
      visibility: hidden;
    }
  }

  &:hover {
    .system-button-bg {
      &.active {
        opacity: 1;
        visibility: visible;
      }
    }
  }

  &-content {
    &-icon {
      width: 50px;
      display: block;
    }

    &-text {
      font-size: 28px;
      font-weight: 500;
      text-align: left;
      color: #ffffff;
      letter-spacing: 4.2px;
      transform: skewX(-10deg);
      line-height: 1;
    }
  }

  &-right {
    .system-button-content {
      padding-right: 38px;
      justify-content: flex-end;

      &-icon {
        order: 1;
        margin-left: 10px;
      }
    }
  }

  &-left {
    .system-button-content {
      padding-left: 38px;

      &-icon {
        margin-right: 10px;
      }
    }
  }
}
</style>
